<template>
  <h1>svg 图标、el 图标、动态加载图标</h1>
  <p>
    svg 图标来源
    <a href="https://remixicon.com/" target="_blank">https://remixicon.com/</a
    >，图标配置到 assets\icons\svg，svg-icon 的 name 属性和文件名相同。<br />
    vite.config.ts 中配置插件 createSvg("./src/assets/icons/svg/")<br />
    main.ts 中注入全局组件 svg-icon<br />
    尺寸和颜色信息使用 el-icon 配置
  </p>
  <ico-svg icon="menu-fold-line" color="red"></ico-svg>

  <ico-svg icon="menu-unfold-line" color="#0000ff"></ico-svg>

  <el-icon :size="20" color="red"
    ><ico-svg icon="menu-unfold-line"></ico-svg
  ></el-icon>

  <p>
    ico-auto 为包装后的组件，可以动态加载图标。注意 el-icon
    图标名称需要大写，如果是多个单词，第二个单词大写
  </p>
  Apple
  <el-icon :size="20" color="red"><ico-auto icon="Apple"></ico-auto></el-icon>
  ChatDotSquare
  <el-icon :size="20" color="red"
    ><ico-auto icon="ChatDotSquare"></ico-auto
  ></el-icon>

  <el-button type="primary" :icon="Setting"> 原生按钮 </el-button>

  <el-button type="primary">
    <el-icon><setting /></el-icon>
    &nbsp;原生图标
  </el-button>

  <el-button type="primary">
    <el-icon><ico-auto icon="Setting"></ico-auto></el-icon>
    &nbsp; 包装后加载的图标
  </el-button>

  <br />
  <el-radio v-model="iconName" label="Check" size="large">Check</el-radio>
  <el-radio v-model="iconName" label="Cherry" size="large">Cherry</el-radio>
  <el-radio v-model="iconName" label="ColdDrink" size="large"
    >ColdDrink</el-radio
  >
  动态加载图标：<el-icon ref="icoAutoRef"
    ><ico-auto :icon="iconName"></ico-auto
  ></el-icon>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Setting } from "@element-plus/icons";
const iconName = ref("Check");
</script>
